<template>
  <div class="project_list">
    <!-- v-if="['总项目数'].includes(params.jypType)" -->
    <div class="top">
      <div class="each">
        <span class="title">预警类型</span>
        <el-select
          v-model="search_params.w"
          placeholder="请选择"
          style="width: 150px"
          clearable
        >
          <el-option
            v-for="item in [
              { label: '黄灯' },
              { label: '橙灯' },
              { label: '红灯' }
            ]"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </div>
      <div class="each">
        <span class="title">项目名称</span>
        <el-input
          type="text"
          v-model="search_params.n"
          placeholder="请输入"
          clearable
          style="width: 170px"
        ></el-input>
      </div>
      <div class="each">
        <span class="title">责任单位</span>
        <el-input
          type="text"
          v-model="search_params.d"
          placeholder="请输入"
          clearable
          style="width: 170px"
        ></el-input>
      </div>
      <div class="each">
        <span class="title">建设性质</span>
        <el-select
          v-model="search_params.b"
          placeholder="请选择"
          clearable
          style="width: 150px"
        >
          <el-option
            v-for="item in [{ label: '新建' }, { label: '续建' }]"
            :key="item.label"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="main">
      <el-table
        v-loading="loading"
        :data="tableData"
        height="100%"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column
          v-for="item in header_list"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template v-if="item.label === '预警级别'" v-slot="scope">
            <!--                        <i v-if="scope.row.lamp" class="icon-yujing1" :style="{color:point_color[scope.row.lamp]}"></i>-->
            <span
              v-if="scope.row.预警级别"
              :style="{ color: point_color[scope.row.预警级别] }"
              >{{ scope.row.预警级别 }}</span
            >
          </template>
        </el-table-column>
        <!--                v-if="['总项目数'].includes(params.jypType)" -->
        <el-table-column label="操作" width="120">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="seeDetail(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getProjectList } from '@/api/home.js';
import config from './config';

const loading = ref(true);
const params = JSON.parse(useRoute().query.params);
// const header_list = config[params.jypType];
const header_list = config.总项目数;
const tableData = ref([]);
getData();
function getData(searchParams = {}) {
  loading.value = true;
  getProjectList({ ...params, ...searchParams }).then((data) => {
    tableData.value = data.data;
    loading.value = false;
  });
}
const router = useRouter();
//查看详情
function seeDetail(row) {
  router.push({ path: 'project_detail', query: { id: row.ID } });
}
//搜索参数
const search_params = reactive({
  w: '', //预警类型
  b: '', //建设性质
  n: '', //项目名称
  d: '' //责任单位
});
let timer = null;
watch(search_params, (value) => {
  timer && clearTimeout(timer);
  timer = setTimeout(() => {
    getData(value);
  }, 500);
});
</script>
<script>
export default {
  name: 'warning_list',
  data() {
    return {
      point_color: {
        黄灯: '#f5ff29',
        红灯: '#ff3333',
        橙灯: '#fca61b',
        '': '#3396fb'
      }
    };
  }
};
</script>

<style lang="less">
@import './list.less';
</style>
<style scoped lang="less">
.project_list {
  height: 100%;
  display: flex;
  font-size: 18px !important;
  flex-direction: column;
  > .top {
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    > .each {
      display: flex;
      align-items: center;
      margin-left: 40px;
      > .title {
        margin-right: 10px;
        flex-shrink: 0;
      }
    }
    > .each:first-child {
      margin-left: 10px;
    }
  }
  > .main {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
